<template>
    <el-input v-model="row[column.property]" :type="type" :maxlength="maxlength"
              :minlength="minlength" :show-word-limit="showWordLimit"
              :placeholder="placeholder" :clearable="clearable"
              :show-password="showPassword" :disabled="disabled"
              :size="size" :prefix-icon="prefixIcon" :suffix-icon="suffixIcon"
              :rows="rows" :autosize="autosize" :autocomplete="autocomplete"
              :name="name" :readonly="readonly" :resize="resize"
              :autofocus="autofocus" :label="label" :tabindex="tabindex"
              :validate-event="validateEvent" @blur.native="handleBlur"
              @focus.native="handleFocus" @change.native="handleChange"
              @input.native="handleInput" @clear="handleClear"
              @keyup.enter.native="handleEnter"
              class="table_custom_input"
              v-int="integer" v-double="double"
              v-double-input-new="doubleInput" />
</template>

<script>
export default {
    name: "CustomInput",
    props: {
        params: Object,
        type: {
            type: String,
            default: 'text'
        },
        maxlength: Number,
        minlength: Number,
        showWordLimit: {
            type: Boolean,
            default: false,
        },
        placeholder: String,
        clearable: {
            type: Boolean,
            default: true,
        },
        showPassword: {
            type: Boolean,
            default: false,
        },
        disabled: {
            type: Boolean,
            default: false,
        },
        size: String,
        prefixIcon: String,
        suffixIcon: String,
        rows: {
            type: Number,
            default: 2,
        },
        autosize: {
            type: [Boolean, Object],
            default: false,
        },
        autocomplete: {
            type: String,
            default: 'off',
        },
        name: String,
        readonly: {
            type: Boolean,
            default: false,
        },
        resize: String,
        autofocus: {
            type: Boolean,
            default: false,
        },
        label: String,
        tabindex: String,
        validateEvent: {
            type: Boolean,
            default: true,
        },
        integer: {
            type: Boolean,
            default: false,
        },
        double: {
            type: [ Boolean, Number ],
            default: false,
        },
        doubleInput: {
            type: Object,
            default() {
                return undefined;
            },
        },
    },
    data() {
        return {
            loading: false,
            optionsList: [],
            row: {},
            column: {},
        };
    },
    created() {
        this.init();
    },
    methods: {
        async init() {
            const { row, column } = this.params;
            this.row = row;
            this.column = column;
        },
        handleChange() {
            const { row, column } = this;
            this.$emit('change', row[column.property]);
        },
        handleInput() {
            const { row, column } = this;
            this.$emit('input', row[column.property]);
        },
        handleClear() {
            this.$emit('clear');
        },
        handleBlur() {
            this.$emit('blur');
        },
        handleFocus() {
            this.$emit('focus');
        },
        handleEnter() {
            const { row, column } = this;
            this.$emit('enter', row[column.property]);
        },
    },
}
</script>

<style lang="less" rel="stylesheet/less" scoped>
.table_custom_input {
    height: 30px !important;

    /deep/.el-input__inner {
        height: 30px !important;
        padding-left: 5px;
        padding-right: 26px;
    }

    /deep/.el-input__suffix {
        right: 1px;
        height: 28px;
    }

    /deep/.el-input__clear {
        line-height: 30px;
    }
}
</style>
